<template>
  <!-- 首页，通知 -->
  <div class="home">
 
    <div class="home_container">
      <div class="area_wrap">
        <div class="area_tip">考试通知</div>
        <div class="temp_box"></div>
        <div v-if="noticeList.length > 0" class="notice_list_wrap">
          <div
            v-for="notice of noticeList"
            :key="notice.id" 
            class="item_wrap"
            @click="showDetailHandle(notice)">
            {{ notice.title }}
          </div>
        </div>
        <NonDataWrap v-else />
      </div>
      <div class="area_wrap" style="margin-bottom: 60px">
      
      </div>
    </div>

  
  </div> 
</template>

<script>
import {
  getTeacherList
} from '@/api/user'

import {
  getNoticeList
} from '@/api/notice'
//无数据
import NonDataWrap from '@/components/NonDataWrap.vue';
export default {
  name: 'HomeView',
  components: {
    NonDataWrap,
  },
  data() {
    return {
      
      noticeList: [],
      noticeContent: '',

    }
  },


  created() {
  
    this.getNoticeList()
  }, 
  methods: {  
   


    getNoticeList() {
      getNoticeList().then(res => {
        if (res.code == 0 ) {
          this.noticeList = res.data
        } else {
          return this.$message.error(res.msg)
        }
      })
    },
  

  }
}
</script>
<style lang="scss" scoped>

.home{
  .home_container{


    .area_wrap{
      .area_tip{
        position: relative;
        top: 10px;
        left: 40px;
        z-index: 100;
        background: #EF881A;
        color: #fff;
        font-weight: bold;
        display: inline-block;
        border-radius: 5px;
        padding: 10px 20px;
        
      }
      .temp_box{
        padding: 20px;
      }
      .list_wrap{
        box-sizing: border-box;
        width: 705px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        .item_wrap{
          width: 60px;
          box-sizing: border-box;
          margin: 10px 5px 10px 5px;
        
          }
        }


      }
      .notice_list_wrap{
        .item_wrap{
          font-size: 16px;
          font-weight: bold;
          border: 1px solid #eee;
          padding: 10px;
          border-radius: 5px;
          margin-bottom: 10px;
          cursor: pointer;
          &:hover{
      
        color: #EF881A;
          }
        }
      }
    }
  }

</style>